<template>
  <div class="good-out">
    <div class="good-body">
      <loading :state="loading"></loading>
      <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref">
        <slot name="sure" @click="deleteGoods"></slot>
      </popup>
      <div v-if="emta">
        <div class="good-classify" v-for="(goods,goodsIndex,key1) in normalGoods" :key="key1">
          <div class="title">{{goods.region.title}}</div>
          <div class="goods-list" v-for="(good,goodIndex,key2) in goods.list" :key="key2">
            <svg aria-hidden="true" class="choose-logo" :class="good.state? 'cho' : 'noc'" @click="normalChoose(good)">
              <use xlink:href="#icon-gwc_xz"></use>
            </svg>
            <img :src="good.product.pic" class="good-pic">
            <div class="r-body">
              <div class="top">{{good.product.title}}</div>
              <div class="des"><span v-for="des in good.product.detail" :key="des.name">{{des.value}}</span></div>
              <div class="t-r">￥{{good.product.price}}</div>
              <div class="control">
                <num-control :num="good.num" :good="good" :region="goods.region.id" :index1="parseInt(goodsIndex)"
                             :index2="parseInt(goodIndex)" @changeNum="getNum"></num-control>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="car-emt">
        <!--<img src="../../../static/img/6.png" class="emt">-->
        <p>空空如也<br></p>
      </div>
      <div class="total">
        <svg aria-hidden="true" class="choose-logo" :class="allstate? 'cho' : 'noc'" @click="allChoose()">
          <use xlink:href="#icon-gwc_xz"></use>
        </svg>
        <div class="all">全选</div>
        <div @click="deleteGoods">删除</div>
        <div class="total-num">共{{totalNum}}件</div>
        <div class="submit" @click="toOrder">去结算:￥{{totalPrice | keepTwoNum }}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import numControl from '../../components/cart/numControl';
  import {Toast} from 'vant';

  export default {
    components: {
      numControl
    },
    data() {
      return {
        normalGoods: [],
        changeType: true,
        loading: true,
        pupData: {
          des: '确认删除所选产品？',
          sure: '删除',
          cancel: '取消'
        },
        goodId: '',
        allstate: false,
        fal: `${this.$Public.ossImg}choose1.svg`,
        tru: `${this.$Public.ossImg}choosed.svg`,
        emtPic: `${this.$Public.webPageImg}emt.png`
      };
    },
    watch: {},
    filters: {
      keepTwoNum: function (val) {
        let value = Number(val);
        return value.toFixed(2);
      }
    },
    computed: {
      // 总价
      totalPrice() {
        let total = 0;
        this.selectGoods.forEach((good) => {
          good.list.forEach((data) => {
            total += data.product.price * data.num;
          });
        });
        return total;
      },
      // 普通商品是否全选中
      allnormal() {
        let allnormal = 1;
        let allstate = [];
        this.normalGoods.forEach((good) => {
          good.list.forEach((data) => {
            allstate.push(data);
          });
        });
        let bool = allstate.some(function (item, index, array) {
          return item.state === false;
        });
        if (bool === true) {
          allnormal = 0;
        }
        return allnormal;
      },
      emta() {
        return (this.normalGoods.length !== 0);
      },
      // 全部数量
      totalNum() {
        let total = 0;
        this.selectGoods.forEach((good) => {
          good.list.forEach((data) => {
            total += parseInt(data.num);
          });
        });
        return total;
      },
      // 选中的商品
      selectGoods() {
        let normalGood = [];
        this.normalGoods.forEach((good) => {
          let single = {
            region: good.region,
            list: []
          };
          good.list.forEach((data) => {
            if (data.state === true) {
              single.list.push(data);
            } else {
              single.list.filter(t => t !== data);
            }
          });
          if (single.list.length > 0) {
            normalGood.push(single);
          }
        });
        return normalGood;
      }
    },
    mounted() {
      this.getAll();
    },
    methods: {
      // 获取全部信息
      getAll() {
        this.$Sale.cart('all').then(res => {
          this.loading = false;
//          res.data是对象
          let arr = [];
          for (let i in res.data) {
            console.log(res.data[i]);
            arr.push(res.data[i]);
          }
          this.normalGoods = arr;
//          res.data是数组
//          this.normalGoods = res.data;
        }, () => {
          this.loading = false;
        });
      },
      // 删除弹出框确定
      sureFun() {
        // str位子组件串来的参数
        this.$refs.popupref.switchState();
        let data = [];
        let that = this;
        this.selectGoods.forEach(function (obj) {
          obj.list.forEach((dat) => {
            let aaa = {};
            that.$set(aaa, 'productId', dat.product.id);
            that.$set(aaa, 'region', obj.region.id);
            that.$set(aaa, 'normId', dat.product.norm_id);
            data.push(aaa);
          });
        });
        this.$Sale.cart('delete', {item: data}).then(res => {
          this.getAll();
        });
      },
      // 删除弹出框取消
      cancelFun() {
        this.$refs.popupref.switchState();
      },
      // 启动弹出框
      deleteGoods() {
        let allstate = [];
        this.normalGoods.forEach((good) => {
          good.list.forEach((data) => {
            allstate.push(data);
          });
        });
        let bool = allstate.some(function (item, index, array) {
          return item.state === true;
        });
        if (bool) {
          this.pupData.des = '确认删除所选产品';
          this.pupData.sure = '删除';
        } else {
          this.pupData.des = '没有选中任何商品';
          this.pupData.sure = '关闭';
        }
        this.$refs.popupref.switchState();
      },
      // 普通商品选择
      normalChoose(data) {
        data.state = !data.state;
        this.allstate = this.allnormal;
      },
      // 全选按钮
      allChoose() {
        this.allstate = !this.allstate;
        if (this.allstate === true) {
          this.normalGoods.forEach(function (obj) {
            obj.list.forEach((data) => {
              data.state = true;
            });
          });
        } else {
          this.normalGoods.forEach(function (obj) {
            obj.list.forEach((data) => {
              data.state = false;
            });
          });
        }
      },
      getNum(data) {
        this.normalGoods[data.index1].list[data.index2].num = data.num;
//
      },
      // 跳转订单确认页面
      toOrder() {
        /** *原始代码* */
        if (this.selectGoods.length === 0) {
          Toast('请选择商品');
        } else {
          this.$router.push('order-detail');
          this.$store.commit('changeSelectGoods', this.selectGoods);
        }
      }
    },
    created() {
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .good-out {
    background: linear-gradient(to bottom right, #923df0, #721fd9); /* 标准的语法（必须放在最后） */
    padding-bottom 20vw
  }

  .good-body
    min-height 100%
    margin-bottom 30vw
    padding-top vw(10)
    .good-classify
      background #fff
      margin 0 vw(15) vw(10)
      border-radius vw(10)
      .title
        font-size vw(14)
        color main-color
        height vw(30)
        line-height vw(30)
        border-bottom 1px solid #f7f7f7
        padding-left vw(10)
      .goods-list
        padding 10px
        display flex
        position relative
        align-items center
        .choose-logo
          width vw(20)
          height vw(20)
        .noc
          fill #eee
        .cho
          fill main-color
        .good-pic
          width vw(70)
          height vw(70)
          margin 0 vw(10)
        .r-body
          position relative
          height vw(70)
          flex 1
          .top
            font-size word14
            color #000
            margin-top vw(5)
            width: 65%;
            line-height: 1.5;
          .des
            font-size word12
            color #999
            position: absolute;
            bottom: vw(5);
            width: 60% !important;
            height vw(24)
            multi(2);
          .t-r
            font-size: word14
            color main-color
            position: absolute;
            right: 0;
            top: vw(9);
          .control
            position: absolute;
            right: 0;
            bottom: vw(5);
    .car-emt
      text-align: center;
      margin-top: 25vh;
      .emt
        width: vw(145);
        height vw(132)
        margin-bottom: 3vw;
      p
        font-size: word14;
        color: #fff;
        line-height 1.5
    .total
      background: #fff
      position: fixed;
      bottom: vw(45);
      width: 100vw;
      display: flex;
      height: vw(45);
      padding 2vw
      box-sizing border-box
      align-items: center
      font-size word14
      color #333
      .submit
        width: vw(140)
        background: main-color
        font-size 3.7vw
        color: #fff
        text-align: center
        height: vw(40)
        line-height: vw(40)
        border-radius vw(20)
        position: absolute
        right: vw(15)
      .choose-logo
        width vw(20)
        height vw(20)
        margin-right 2vw
      .noc
        fill #eee
      .cho
        fill main-color
      .all
        margin-right 5vw
      .total-num
        position: absolute
        left: vw(130)
</style>
